<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 客户列表</title>
    <link rel="shortcut icon" href="../../content/static/img/favicon.ico">
    <link href="../../content/css/common_modal.css" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../../content/static/js/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" />
    <link href="../../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <style>
        .fa-female:before {
            color: #fb7cd5;
        }
        .fa-location-arrow:before {
            color: rebeccapurple;
        }
        .fa-mobile-phone:before, .fa-mobile:before{
            color: black;
        }
        .fa-map-marker:before {
            color: #1ab394;
        }
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        table tr{ height:40px;}
        #productTree {
            width: 320px;
            max-height: 376px;
            min-height: 32px;
            overflow-y: auto;
            padding: 10px 10px 0;
        }
        .projectTreeWrap {
            top:148px !important
        }
        .checkbox label, .radio label{
            padding-left: 15px;
        }.search{
            float: left;padding: 0px 10px 0px 0px;
        } 
       .tooltip-inner{
        max-width: 650px;
        text-align: left;
       }
    </style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>客户信息</a></li>
                        <li><a>客户列表</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <div class="search-condition">
                        <div>
                            <div class="filter-wrapper">
                                <ul class="clearfix">
                                    <li class="filter-item ">
                                        <label>客户名称</label>
                                        <div>
                                            <div class="fill-wrapper">
                                                <input id="serialNumber" type="text" class="fill-item">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="filter-item ">
                                        <label>客户编号</label>
                                        <div>
                                            <div class="fill-wrapper">
                                                <input id="serialNumber" type="text" class="fill-item">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="filter-item ">
                                        <label>联系电话</label>
                                        <div>
                                            <div class="fill-wrapper">
                                                <input id="serialNumber" type="text" class="fill-item">
                                            </div>
                                        </div>
                                    </li>

                                    <li class="filter-item ">
                                        <label>客户等级</label>
                                        <div>
                                            <select v-select2 id="warehouse">
                                                <option value='0'>全部</option>
                                                <option v-for="item in warehouseList" v-bind:value="item.Value"
                                                    v-bind:selected="$index===0" v-text="item.Text"></option>
                                            </select>
                                        </div>
                                    </li>
                                    <li class="filter-item">
                                        <a class="revision-btn revision-btn-search">搜索</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn" v-on:click="addShow()">新增</a>
                            <a class="revision-btn" v-on:click="exportShow()">导出</a>&nbsp;&nbsp;
                            <span>总条数：<span>12 条</span></span>
                        </div>
                    </div>
                    <table class="table table-hover table-bordered">
                        <thead style="background: #f5f5f5;">
                            <tr>
                                <th>
                                    <input class="revision-checkbox" type="checkbox" v-model="item.checked">
                                </th>
                                <th>姓名</th>
                                <th>
                                    <div class="tooltip-demo">编号
                                        <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                            title="" data-original-title="该客户的唯一编码"></label>
                                    </div>
                                </th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>应收欠款</th>
                                <th>电话</th>
                                <th>客户级别</th>
                                <th>关联业务员</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input class="revision-checkbox" type="checkbox" v-model="item.checked">
                                </td>
                                <td>张三</td>
                                <td><a href="" data-toggle="modal" data-target="#edit">cu0000307</a></td>
                                <td class="text-navy">男</td>
                                <td>23</td>
                                <td class="text-danger" style="color: #F00;">-200.00</td>
                                <td>15150444723</td>
                                <td>普通客户</td>
                                <td>-</td>
                                <td><i class="fa fa-close text-danger"></i></td>
                                <td>
                                    <a href="" class="">编辑</a>
                                    <a href="" class="">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input class="revision-checkbox" type="checkbox" v-model="item.checked">
                                </td>
                                <td>李四</td>
                                <td><a href="" data-toggle="modal" data-target="#edit">cu0000105</a></td>
                                <td class="text-navy">男</td>
                                <td>27</td>
                                <td class="text-danger" style="color: #F00;">-800.00</td>
                                <td>15150444723</td>
                                <td>普通客户</td>
                                <td>-</td>
                                <td><i class="fa fa-check text-navy"></i></td>
                                <td>
                                    <a href="" class="">编辑</a>
                                    <a href="" class="">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input class="revision-checkbox" type="checkbox" v-model="item.checked">
                                </td>
                                <td>王麻子</td>
                                <td><a href="" data-toggle="modal" data-target="#edit">cu0000661</a></td>
                                <td class="text-warning">女</td>
                                <td>65</td>
                                <td class="text-danger" style="color: #F00;">-56409.00</td>
                                <td>15150444723</td>
                                <td>普通客户</td>
                                <td>张晓敏</td>
                                <td><i class="fa fa-check text-navy"></i></td>
                                <td>
                                    <a href="">编辑</a>
                                    <a href="">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input class="revision-checkbox" type="checkbox" v-model="item.checked">
                                </td>
                                <td>李文明</td>
                                <td><a href="" data-toggle="modal" data-target="#edit">cu0000661</a></td>
                                <td class="text-warning">女</td>
                                <td>65</td>
                                <td class="text-danger" style="color: #F00;">-569.00</td>
                                <td>15150444723</td>
                                <td>普通客户</td>
                                <td>范筱</td>
                                <td><i class="fa fa-check text-navy"></i></td>
                                <td>
                                    <a href="">编辑</a>
                                    <a href="">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input class="revision-checkbox" type="checkbox" v-model="item.checked">
                                </td>
                                <td>赵武</td>
                                <td><a href="" data-toggle="modal" data-target="#edit">cu0000661</a></td>
                                <td class="text-warning">女</td>
                                <td>65</td>
                                <td class="text-danger" style="color: #F00;">-56.00</td>
                                <td>15150444723</td>
                                <td>普通客户</td>
                                <td>张震岳</td>
                                <td><i class="fa fa-close text-danger"></i></td>
                                <td>
                                    <a href="">编辑</a>
                                    <a href="">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <!-- 新增进货单 -->
                <modal v-bind:show.sync="addModal.show" v-bind:style="addModal .style" v-bind:add-class="addModal.addClass">
                    <h4 slot="header">新增进货单
                        <span class="title-tips">单据编号：<span>XTD20181220005</span></span>
                        <span class="title-tips">制单日期：<span>2018-12-20 14:40:58</span></span>
                        <span class="title-tips">经办人：<span>当前登陆人</span></span>
                    </h4>
                    <div slot="body" class="clearfix">
                        <div class="panel blank-panel">
                            <div class="panel-options">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a data-toggle="tab" href="#tab-4">扫码新增进货单</a>
                                    </li>
                                    <li class=""><a data-toggle="tab" href="#tab-5" aria-expanded="false">导入新增进货单</a>
                                    </li>
                                    <li class=""><a data-toggle="tab" href="#tab-6" aria-expanded="false">关联借入单</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="panel-body">
                                <div class="tab-content">
                                    <div id="tab-4" class="tab-pane active">
                                        <form class="form-horizontal" novalidate="novalidate">
                                            <div class="form-group" style="margin-bottom:0px">
                                                <div class="col-sm-4">
                                                    <input class="fill-item timeChoose" placeholder="请输入或扫描商品编号/条形码/序列号"
                                                        type="text" style="border:2px solid #444" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div id="tab-5" class="tab-pane">
                                        <a class="revision-btn" href="javascript:;">导入商品信息</a>
                                    </div>
                                    <div id="tab-6" class="tab-pane">
                                        <a class="revision-btn" href="javascript:;" v-on:click="relevanceShow()">选择借入单</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h3 class="panel-title">商品信息
                                <span class="title-tips">注：单个销售单可选最大产品数为100条</span>
                                <a style="margin-left: 535px;" class="revision-btn" href="javascript:;" v-on:click="selectProduct()">批量选择商品</a>
                            </h3>
                        </div>
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <table class="table table-hover table-bordered">
                                <thead>
                                    <tr>
                                        <th style="width: 70px;">序号</th>
                                        <th>商品名称/规格</th>
                                        <th style="width: 80px;">商品编号</th>
                                        <th style="width: 70px;">属性</th>
                                        <th style="width: 50px;">单位</th>
                                        <th style="width: 70px;">数量</th>
                                        <th style="width: 80px;">单价(元)</th>
                                        <th style="width: 80px;">金额(元)</th>
                                        <th style="width: 120px;">备注</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in productChooseList" v-bind:data-index="$index">
                                        <td><span v-text="$index+1"></span>
                                            <span style="padding: 0px 0px 0px 5px;"><a href="javascript:;">删除</a></span>
                                        </td>
                                        <td> <span v-text="item.productName"></span><span v-if="item.prope!=''">/</span><span
                                                v-text="item.prope"></span></td>
                                        <td class="text-navy"><span v-text="item.productCode"></span></td>
                                        <td><span v-text="item.prope"></span></td>
                                        <td><span v-text="item.spec"></span></td>
                                        <td class="text-navy">
                                            <input type="text" class="fill-item" value="{{item.stockCount}}" />
                                        </td>
                                        <td class="amount">
                                            <input type="text" class="fill-item" value="{{item.price}}" />
                                        </td>
                                        <td class="amount">
                                            <input type="text" class="fill-item" value="{{item.price*item.stockCount}}" />
                                        </td>
                                        <td>
                                            <input class="fill-item" type="text" />
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div>
                                <h3 class="panel-title">支付信息</h3>
                            </div>
                            <div class="form-group" style="margin-top: 15px">
                                <label class="col-sm-1 control-label">结算账户</label>
                                <div class="col-sm-3">
                                    <select id="account">
                                        <option v-for="item in accountList" v-bind:value="item.Value" v-bind:selected="$index===0"
                                            v-text="item.Text"></option>
                                    </select>
                                </div>
                                <label class="col-sm-1 control-label">应付金额</label>
                                <div class="col-sm-3">
                                    <input id="firstname" readonly name="firstname" class="form-control" type="text"
                                        value="8641.00">
                                </div>
                                <label class="col-sm-1 control-label">实付金额</label>
                                <div class="col-sm-3">
                                    <input id="lastname" name="lastname" class="form-control" type="text" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">其他费用</label>
                                <div class="col-sm-3">
                                    <input id="lastname" name="lastname" class="form-control" type="text">
                                </div>
                                <label class="col-sm-1 control-label">总计金额</label>
                                <div class="col-sm-3">
                                    <input id="lastname" name="lastname" class="form-control" type="text" readonly>
                                </div>
                            </div>
                            <div>
                                <h3 class="panel-title">其他信息</h3>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">选择仓库</label>
                                <div class="col-sm-2">
                                    <select id="warehouseAdd">
                                        <option v-for="item in warehouseList" v-bind:value="item.Value" v-bind:selected="$index===0"
                                            v-text="item.Text"></option>
                                    </select>
                                </div>
                                <label class="col-sm-1 control-label">供应商</label>
                                <div class="col-sm-2">
                                    <select id="supplier">
                                        <option v-for="item in warehouseList" v-bind:value="item.Value" v-bind:selected="$index===0"
                                            v-text="item.Text"></option>
                                    </select>
                                </div>
                                <label class="col-sm-1 control-label" style="width: 110px;">姓名&电话</label>
                                <div class="col-sm-3">
                                    <input class="form-control" type="text" value="{{telphone}}" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">纸质回单</label>
                                <div class="col-sm-11">
                                    <div class="file-loading">
                                        <input id="file-es" multiple name="file-es[]" type="file">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-1 control-label">备注</label>
                                <div class="col-sm-7">
                                    <textarea id="ccomment" name="comment" class="form-control" style="height: 65px;"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </modal>
                <!-- 选择商品 -->
                <modal v-bind:show.sync="productSelectModal.show" v-bind:style="productSelectModal .style"
                    v-bind:add-class="productSelectModal.addClass">
                    <h4 slot="header">选择商品</h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <div class="search-list" style="text-align:right;margin-bottom: 15px">
                                <div style="float: left;padding: 0px 10px 0px 0px;width: 200px;">
                                    <input type="text" placeholder="请输入商品名称/编号/条形码" class="fill-item">
                                </div>
                                <div style="float: left;padding: 0px 10px 0px 0px;width: 250px;">
                                    <span class="treeBtn project" style="text-align: left;">选择产品类型</span>
                                </div>
                                <a class="revision-btn" href="javascript:;" style="margin-left: 25px;">查询</a>
                            </div>
                            <table class="table table-hover table-bordered">
                                <thead>
                                    <tr>
                                        <th style="width: 50px;">
                                            <input class="revision-checkbox" type="checkbox" v-model="item.checked"
                                                v-on:click="productChooseClick(item)">
                                        </th>
                                        <th style="width: 50px;">数量</th>
                                        <th>商品名称/规格</th>
                                        <th style="width: 50px;">单位</th>
                                        <th style="width: 50px;">图片</th>
                                        <th style="width: 70px;">进货价</th>
                                        <th style="width: 80px;">库存数量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="item in productListSelect">
                                        <td>
                                            <input class="revision-checkbox" type="checkbox" v-on:click="productChooseClick(item)">
                                        </td>
                                        <td>
                                            <input type="text" class="fill-item" style="width: 50px">
                                        </td>
                                        <td>
                                            劲霸内饰清洁剂/12L
                                        </td>
                                        <td><span v-text="item.spec"></span></td>
                                        <td>
                                            <img style="height: 80px;width: 80px;margin-bottom: 6px;margin-top: 6px;float: left;"
                                                src="../../content/static/img/no_pic.png">
                                        </td>
                                        <td class="text-navy"><span v-text="item.stockCount"></span></td>
                                        <td class="text-navy"><span v-text="item.inventoryCount"></span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                        <div style="color: #fb7cd5">此处前端分页处理/后端也行</div>
                    </div>
                </modal>
                <!-- 进货单详情 -->
                <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
                    <h4 slot="header">详情</h4>
                    <div slot="body" class="clearfix">
                        <div class="approve-detail-modal-title">
                            <h2>进货单详情</h2>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>单据编号</em>
                                <span>JHD20181220005</span>
                            </li>
                            <li>
                                <em>制单时间</em>
                                <span>2018-12-22</span>
                            </li>
                            <li>
                                <em>制单人</em>
                                <span>王老板</span>
                            </li>
                            <li>
                                <em>客户名称</em>
                                <span>盈云软件网络科技股份有限公司</span>
                            </li>
                            <li>
                                <em>入库</em>
                                <span>A仓</span>
                            </li>
                            <li class="w-100">
                                <em>备注信息</em>
                                <span>盈云软件网络科技股份有限公司120台按摩器</span>
                            </li>
                            <li class="w-100">
                                <em>附件信息</em>
                                <span><a href="javascript:;">点击查看附件</a></span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">商品信息 </h3>
                        </div>
                        <div class="col-sm-12" style="padding: 0px;">
                            <div class="alert alert-info" style="margin: 10px 0px;">
                                <span>共计：<spanclass="text-navy">8 </span>条商品</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>总计金额：<span class="amount">812,000</span></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>实收金额：<span class="amount">812,000</span></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>其他费用<span class="amount">812,000</span></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>折扣率<span class="amount">100%</span></span>
                            </div>
                        </div>
                        <table class="table table-hover table-bordered" style="margin-top: 10px">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">序号</th>
                                    <th>商品名称/规格</th>
                                    <th>商品编号</th>
                                    <th style="width: 50px;">属性</th>
                                    <th style="width: 50px;">单位</th>
                                    <th style="width: 50px;">数量</th>
                                    <th style="width: 75px;">参考价(元)</th>
                                    <th style="width: 70px;">单价(元)</th>
                                    <th style="width: 70px;">金额(元)</th>
                                    <th style="width: 70px;">条形码</th>
                                    <th style="width: 80px;">备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>三角阀/通用型</td>
                                    <td>SP20150717002</td>
                                    <td></td>
                                    <td>个</td>
                                    <td class="text-navy">1</td>
                                    <td class="amount">6.00</td>
                                    <td class="amount">8.00</td>
                                    <td class="amount">8.00</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>劲霸超浓缩低泡洗车香波/12L</td>
                                    <td>Q01</td>
                                    <td></td>
                                    <td>桶</td>
                                    <td class="text-navy">1</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">156.00</td>
                                    <td class="amount">156.00</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>劲霸内饰清洁剂/5L/12L</td>
                                    <td>Q0961243218</td>
                                    <td></td>
                                    <td>桶</td>
                                    <td class="text-navy">9</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">360.00</td>
                                    <td class="amount">360.00</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <h3 class="panel-title">送货信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>送货日期</em>
                                <span>2018-12-22</span>
                            </li>
                            <li>
                                <em>联系人</em>
                                <span>方老板小蜜</span>
                            </li>
                            <li>
                                <em>联系电话</em>
                                <span>1888888888</span>
                            </li>
                            <li class="w-100">
                                <em>送货地址</em>
                                <span>盈云软件网络科技股份有限公司#608</span>
                            </li>
                            <li class="w-100">
                                <em>备注信息</em>
                                <span>盈云软件网络科技股份有限公司120台按摩器</span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">支付信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>结算账户</em>
                                <span>建设银行</span>
                            </li>
                            <li>
                                <em>应收金额</em>
                                <span class="amount">10086.00</span>
                            </li>
                            <li>
                                <em>实收金额</em>
                                <span class="amount">10000.00</span>
                            </li>
                            <li>
                                <em>折扣方式</em>
                                <span>折扣率(%)#608</span>
                            </li>
                            <li>
                                <em>其他费用</em>
                                <span class="amount">50.00</span>
                            </li>
                            <li>
                                <em>总计金额</em>
                                <span class="amount">10050.00</span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">审核信息</h3>
                        </div>
                        <table class="table table-hover table-bordered" style="margin-top: 10px">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">序号</th>
                                    <th>审核角色</th>
                                    <th>审核人</th>
                                    <th>审核结果</th>
                                    <th>审核意见</th>
                                    <th>审核日期</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>直属领导</td>
                                    <td>1011164</td>
                                    <td class="text-navy">同意</td>
                                    <td>同意</td>
                                    <td>2018-07-09 16:38:54</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>财务审核</td>
                                    <td>1010064</td>
                                    <td class="text-danger">驳回</td>
                                    <td class="text-danger">驳回，上传发票</td>
                                    <td>2018-07-09 18:38:54</td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </modal>
                <!-- 关联借入单 -->
                <modal v-bind:show.sync="relevanceModal.show" v-bind:style="relevanceModal .style" v-bind:add-class="relevanceModal.addClass">
                    <h4 slot="header">关联借入单<span class="title-tips">注：单笔进货单只能选择<span style="color: red;padding: 0px 2px;font-weight: bold">1</span>笔借入单</span></h4>
                    <div slot="body" class="clearfix">
                        <div class="search-condition">
                            <div>
                                <div class="filter-wrapper" style="height: 120px;">
                                    <ul class="clearfix">
                                        <li class="filter-item ">
                                            <label>单据单号</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>商品名称</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>客户名称</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>业务日期</label>
                                            <div>
                                                <div class="fill-wrapper fill-wrapper-auto">
                                                    <input id="costTimeStart" type="text" class="fill-item timeChoose  revision-time"
                                                        readonly="readonly">
                                                </div>
                                                <div class="fill-desc">到</div>
                                                <div class="fill-wrapper fill-wrapper-auto">
                                                    <input id="costTimeEnd" type="text" class="fill-item timeChoose  revision-time"
                                                        readonly="readonly">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item ">
                                            <label>制单人</label>
                                            <div>
                                                <div class="fill-wrapper">
                                                    <input id="serialNumber" type="text" class="fill-item">
                                                </div>
                                            </div>
                                        </li>
                                        <li class="filter-item">
                                            <a class="revision-btn revision-btn-search">搜索</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <div>
                                <table class="table table-hover table-bordered" style="margin-top: 10px">
                                    <thead>
                                        <tr>
                                            <th style="width: 50px;">
                                                <input class="revision-checkbox" type="checkbox" v-model="item.checked">
                                            </th>
                                            <th>业务日期</th>
                                            <th>单据编号</th>
                                            <th>客户名称</th>
                                            <th>借入商品</th>
                                            <th>借入数量</th>
                                            <th>借入金额(元)</th>
                                            <th>仓库</th>
                                            <th>备注</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input class="revision-checkbox" type="checkbox" v-model="item.checked"></td>
                                            <td>2018-12-27</td>
                                            <td><a href="javascript:;" v-on:click="saleDetailShow()">JRD20181220005</a></td>
                                            <td class="text-navy">大洋百货</td>
                                            <td>劲霸超浓缩低泡洗车香波、</td>
                                            <td class="amount">6</td>
                                            <td class="amount">60.00</td>
                                            <td>A仓</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td><input class="revision-checkbox" type="checkbox" v-model="item.checked"></td>
                                            <td>2018-12-27</td>
                                            <td><a href="javascript:;">JRD20181226222</a></td>
                                            <td class="text-navy">盈云公司</td>
                                            <td>劲霸超浓缩12#</td>
                                            <td class="amount">16</td>
                                            <td class="amount">1650.00</td>
                                            <td>A仓</td>
                                            <td></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                </modal>
                <!-- 借入单详情 -->
                <modal v-bind:show.sync="borrowDetailModal.show" v-bind:style="borrowDetailModal .style"
                    v-bind:add-class="borrowDetailModal.addClass">
                    <h4 slot="header">详情</h4>
                    <div slot="body" class="clearfix">
                        <div class="approve-detail-modal-title">
                            <h2>借入单详情</h2>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>单据编号</em>
                                <span>JRD20181220005</span>
                            </li>
                            <li>
                                <em>制单时间</em>
                                <span>2018-12-22</span>
                            </li>
                            <li>
                                <em>制单人</em>
                                <span>王老板</span>
                            </li>
                            <li>
                                <em>客户名称</em>
                                <span>盈云软件网络科技股份有限公司</span>
                            </li>
                            <li>
                                <em>入库</em>
                                <span>A仓</span>
                            </li>
                            <li class="w-100">
                                <em>备注信息</em>
                                <span>盈云软件网络科技股份有限公司120台按摩器</span>
                            </li>
                            <li class="w-100">
                                <em>附件信息</em>
                                <span><a href="javascript:;">点击查看附件</a></span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">商品信息 </h3>
                        </div>
                        <div class="col-sm-12" style="padding: 0px;">
                            <div class="alert alert-info" style="margin: 10px 0px;">
                                <span>共计：<spanclass="text-navy">8 </span>条商品</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>总计金额：<span class="amount">812,000</span></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>实收金额：<span class="amount">812,000</span></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>其他费用<span class="amount">812,000</span></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>折扣率<span class="amount">100%</span></span>
                            </div>
                        </div>
                        <table class="table table-hover table-bordered" style="margin-top: 10px">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">序号</th>
                                    <th>商品名称/规格</th>
                                    <th>商品编号</th>
                                    <th style="width: 50px;">属性</th>
                                    <th style="width: 50px;">单位</th>
                                    <th style="width: 50px;">数量</th>
                                    <th style="width: 75px;">参考价(元)</th>
                                    <th style="width: 70px;">单价(元)</th>
                                    <th style="width: 70px;">金额(元)</th>
                                    <th style="width: 70px;">条形码</th>
                                    <th style="width: 80px;">备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>三角阀/通用型</td>
                                    <td>SP20150717002</td>
                                    <td></td>
                                    <td>个</td>
                                    <td class="text-navy">1</td>
                                    <td class="amount">6.00</td>
                                    <td class="amount">8.00</td>
                                    <td class="amount">8.00</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>劲霸超浓缩低泡洗车香波/12L</td>
                                    <td>Q01</td>
                                    <td></td>
                                    <td>桶</td>
                                    <td class="text-navy">1</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">156.00</td>
                                    <td class="amount">156.00</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>劲霸内饰清洁剂/5L/12L</td>
                                    <td>Q0961243218</td>
                                    <td></td>
                                    <td>桶</td>
                                    <td class="text-navy">9</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">360.00</td>
                                    <td class="amount">360.00</td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <h3 class="panel-title">支付信息</h3>
                        </div>
                        <ul class="bill-tips clearfix">
                            <li>
                                <em>结算账户</em>
                                <span>建设银行</span>
                            </li>
                            <li>
                                <em>应收金额</em>
                                <span class="amount">10086.00</span>
                            </li>
                            <li>
                                <em>实收金额</em>
                                <span class="amount">10000.00</span>
                            </li>
                            <li>
                                <em>折扣方式</em>
                                <span>折扣率(%)#608</span>
                            </li>
                            <li>
                                <em>其他费用</em>
                                <span class="amount">50.00</span>
                            </li>
                            <li>
                                <em>总计金额</em>
                                <span class="amount">10050.00</span>
                            </li>
                        </ul>
                        <div>
                            <h3 class="panel-title">审核信息</h3>
                        </div>
                        <table class="table table-hover table-bordered" style="margin-top: 10px">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">序号</th>
                                    <th>审核角色</th>
                                    <th>审核人</th>
                                    <th>审核结果</th>
                                    <th>审核意见</th>
                                    <th>审核日期</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>直属领导</td>
                                    <td>1011164</td>
                                    <td class="text-navy">同意</td>
                                    <td>同意</td>
                                    <td>2018-07-09 16:38:54</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>财务审核</td>
                                    <td>1010064</td>
                                    <td class="text-danger">驳回</td>
                                    <td class="text-danger">驳回，上传发票</td>
                                    <td>2018-07-09 18:38:54</td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </modal>
                <!-- 审批进度 -->
                <modal v-bind:show.sync="approvalModal.show" v-bind:style="approvalModal .style" v-bind:add-class="approvalModal.addClass">
                    <h4 slot="header">审批进度</h4>
                    <div slot="body" class="clearfix">
                        <ul class="content">
                            <li class="isHandled approval">
                                <div>
                                    <div>
                                        <p class="link">申请已提交</p>
                                        <p><span class="time">2017-08-24 15:41</span></p>
                                    </div>
                                </div>
                            </li>
                            <li class="isHandled approval">
                                <div>
                                    <p class="link"><span>直属领导</span>&nbsp;&nbsp;&nbsp;<span class="people">[张珍珍]</span></p>
                                    <p>
                                        <span class="time">审批时间：2017-08-24 15:41</span><br>
                                        <span class="result_dec">处理结果：</span>
                                        <span style="color: #1ab394;">同意</span><br>
                                        <span class="result_dec">审批耗时：</span><span>0天0小时1分钟3秒（距离提交时间）</span><br>
                                        <span class="result_dec">审批备注：同意</span>
                                    </p>
                                </div>
                            </li>
                            <li class="isHandled is-reject approval">
                                <div>
                                    <p class="link"><span>财务经理</span>&nbsp;&nbsp;&nbsp;<span class="people">[饭饭]</span></p>
                                    <p>
                                        <span class="time">审批时间：2017-08-24 15:41</span><br>
                                        <span class="result_dec">处理结果：</span>
                                        <span class="amount">驳回</span><br>
                                        <span class="result_dec">审批耗时：</span><span>0天0小时1分钟3秒（距离提交时间）</span><br>
                                        <span class="result_dec">审批备注：<span class="amount">上传发票</span></span>
                                    </p>
                                </div>
                            </li>
                            <li class="is-noapproval approval">
                                <div>
                                    <p class="link"><span>财务经理</span>&nbsp;&nbsp;&nbsp;<span class="people">[饭饭]</span></p>
                                    <p>
                                        <span class="time">审批时间：</span><br>
                                        <span class="result_dec">处理结果：</span><span class="amount"></span><br>
                                        <span class="result_dec">审批耗时：</span><span></span><br>
                                        <span class="result_dec">审批备注：<span class="amount"></span></span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </modal>
            </div>
        </div>
    </div>
    <script src="../../content/js/lib/vue/vue.min.js"></script>
    <script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../../content/static/js/plugins/iCheck/icheck.min.js"></script>
    <script src="../../content/static/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../../content/js/lib/calendar/calendar.js"></script>
    <script src="../../content/js/lib/calendar/scrollbar.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-fileinput/js/plugins/sortable.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
    <script src="../../content/js/lib/vue/vue-modal.js"></script>
    <script src="../../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../../content/js/common.js"></script>
    <script src="../../content/js/lib/vue/select2.js"></script>
    <script type="text/javascript">
        $(function () {
            //时间验证
            var calObj = new $.Calendar({
                //time: true,
                skin: 'white'
            });

            $('#costTimeStart').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    endTime = $('#costTimeEnd').val();
                calObj.pick({
                    elem: this,
                    endDate: endTime
                });
            });
            $('#costTimeEnd').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    startTime = $('#costTimeStart').val();
                calObj.pick({
                    elem: this,
                    startDate: startTime
                });
            });
            $('#backTime').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    startTime = new Date();
                calObj.pick({
                    elem: this,
                    startDate: startTime
                });
            });
        });
        $("#warehouse").select2({
            width: "220px"
        });
        $("#status").select2({
            width: "220px"
        });
        $("#approveStatus").select2({
            width: "220px"
        });
        var vmData = {
            approvalModal: {
                show: false,
                style: {
                    width: '560px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.approvalModal.show = false;
                }
            },
            relevanceModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
            borrowDetailModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.borrowDetailModal.show = false;
                }
            },
            detailModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
            addModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.addModal.show = false;
                }
            },
            productSelectModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.productSelectModal.show = false;
                }
            },
            modelTitle: "",
            approveStatusList: [{
                    "Text": "全部",
                    "Value": "553",
                },
                {
                    "Text": "待项目经理审批",
                    "Value": "553",
                },
                {
                    "Text": "待CEO审批",
                    "Value": "553",
                },
                {
                    "Text": "待A仓Leader审批",
                    "Value": "553",
                },
                {
                    "Text": "待B仓Leader审批",
                    "Value": "553",
                },
                {
                    "Text": "待销售经理审批",
                    "Value": "553",
                },
            ],
            backStatusList: [{
                    "Text": "全部",
                    "Value": "553",
                },
                {
                    "Text": "未归还",
                    "Value": "360",
                }, {
                    "Text": "已归还",
                    "Value": "365",
                },
                {
                    "Text": "转销售",
                    "Value": "4105",
                }
            ],
            warehouseList: [{
                    "Text": "北京",
                    "Value": "553",
                },
                {
                    "Text": "上海",
                    "Value": "360",
                }, {
                    "Text": "大西洋大西洋大西洋大西洋大西洋大西洋大西洋",
                    "Value": "365",
                },
                {
                    "Text": "广州",
                    "Value": "4105",
                }, {
                    "Text": "北冰洋",
                    "Value": "510",
                },
                {
                    "Text": "深圳",
                    "Value": "3219",
                },
                {
                    "Text": "天津",
                    "Value": "99402",
                },
                {
                    "Text": "合肥",
                    "Value": "519",
                },
                {
                    "Text": "苏州",
                    "Value": "518",
                },
                {
                    "Text": "南京",
                    "Value": "517",
                },
                {
                    "Text": "无锡",
                    "Value": "525",
                },
                {
                    "Text": "大东北",
                    "Value": "528",
                },
                {
                    "Text": "大西北",
                    "Value": "533",
                },
                {
                    "Text": "非洲",
                    "Value": "538",
                },
                {
                    "Text": "欧洲",
                    "Value": "537",
                },
                {
                    "Text": "南美洲",
                    "Value": "536",
                }
            ],
            modelFlag: 0,
            selectProductItem: [],
            productListSelect: [{
                    "checked": false,
                    "Id": "1",
                    "productCode": "SP20150717002",
                    "productName": "三角阀",
                    "spec": "桶",
                    "prope": "通用型",
                    "stockCount": "12",
                    "price": "12",
                    "remark": "",
                    "img": "../../content/static/img/no_pic.png"
                },
                {
                    "checked": false,
                    "Id": "2",
                    "productCode": "SP20150717002",
                    "productName": "劲霸皮革清洗剂",
                    "spec": "桶",
                    "prope": "5L",
                    "stockCount": "1",
                    "inventoryCount": "1",
                    "remark": "",
                    "barCode": "",
                    "img": "../../content/static/img/no_pic.png"
                }, {
                    "checked": false,
                    "Id": "3",
                    "productCode": "SP20150717002",
                    "productName": "快卫内饰清洗剂",
                    "spec": "瓶",
                    "prope": "500ML",
                    "stockCount": "52",
                    "price": "52",
                    "remark": "",
                    "img": "../../content/static/img/no_pic.png"
                }, {
                    "checked": false,
                    "Id": "4",
                    "productCode": "SP20150717002",
                    "productName": "漆面至尊镀晶大套装",
                    "spec": "套",
                    "prope": "",
                    "stockCount": "14",
                    "price": "15",
                    "remark": "",
                    "img": "../../content/static/img/no_pic.png"
                }
            ],
            productChooseList: [],
            accountList: [{
                "Text": "中国银行",
                "Value": "1",
            }, {
                "Text": "建设银行",
                "Value": "2",
            }, {
                "Text": "农业银行",
                "Value": "3",
            }, {
                "Text": "工商银行",
                "Value": "4",
            }, {
                "Text": "现金",
                "Value": "5",
            }, ],
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
            approvalShow: function () {
                vm.approvalModal.show = true;
            },
            borrowDetailShow: function () {
                vm.borrowDetailModal.show = true;
            },
            detailShow: function (obj) {
                vm.detailModal.show = true;
                $("#backStatus").select2({
                    width: "160px"
                });
                $("#backStatus").val('').trigger('change'); //初始化
            },
            relevanceShow: function () {
                vm.relevanceModal.show = true;
            },
            addShow: function () {
                vm.addModal.show = true;
                $('#file-es').fileinput({
                    language: 'zh',
                    uploadUrl: '#',
                    allowedFileExtensions: ['jpg', 'png', 'gif']
                });
                $("#warehouseAdd").select2({
                    width: "140px"
                });
                $("#warehouseAdd").val('').trigger('change'); //初始化
                $("#supplier").select2({
                    width: "140px"
                });
                $("#supplier").val('').trigger('change'); //初始化

                $("#supplier").on("select2:select", function () {
                    var data = $(this).val();
                    vm.$set("telphone", "张三  1500000000");
                });
                $("#type").select2({
                    width: "140px"
                });
                $("#type").val('').trigger('change'); //初始化
                $("#account").select2({
                    width: "210px"
                });
                $("#account").val('').trigger('change'); //初始化
            },
            selectProduct: function () {
                vm.productSelectModal.show = true;
            },
            productChooseClick: function (e) {
                if (e.checked) {
                    vm.productChooseList.forEach(function (a, v) {
                        if (a.Id = v.Id)
                            vm.productChooseList.splice(v, 1);
                    });
                } else {
                    vm.productChooseList.push(e);
                }
            },
        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.init();
    </script>
</body>

</html>